<template>
  <a-input-search
    ref="DInputSearch"
    :placeholder="placeholder"
    :size="size"
    v-model="inputValue"
    :disabled="disabled"
    @search="onSearch"
  >
    <slot slot="enterButton" name="enterButton" />
  </a-input-search>
</template>

<script>
export default {
  name: 'DInputSearch',
  props: {
    placeholder: {
      type: String
    },
    size: {
      type: String,
      default: 'default'
    },
    value: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: this.value
    };
  },
  created() {
    if (this.autofocus) {
      this.$nextTick(() => {
        this.$refs.DInputSearch.focus();
      });
    }
  },
  methods: {
    onSearch(value) {
      this.$emit('search', value);
    }
  },
  watch: {
    inputValue: function(newVal) {
      this.$emit('input', newVal);
    },
    value: function(newVal) {
      this.inputValue = newVal;
    }
  }
};
</script>

<style lang="scss" scoped>
.tw-input {
  border-radius: 0;
}
::v-deep .tw-input {
  border-radius: 0;
}
::v-deep .tw-input-sm {
  font-size: 12px;
}
</style>
